<!-- 结算页面 -->
<template>
  <view class="content">
    <view class="main">
      <view class="wait_pay">
        <view class="w_title">
          {{ orderStatu.status }}
        </view>
        <view v-if="orderStatu.status == '待付款'" class="w_detail">
          您的订单已经提交, 请在
          <view class="w_time">{{ remainTime }} </view>
          内完成支付, 超时订单将自动关闭
        </view>
        <view v-else class="w_detail">
          {{ orderStatu.message }}
        </view>
      </view>
      <!-- 取餐地点和时间 -->
      <view class="addressAndTime">
        <view class="address" @click="selectAddress">
          <view class="a_icon"></view>
          <view class="a_text">自取地点:</view>
          <view class="a_select">{{ address.join("-") || '' }}</view>
          <view v-if="!address.length">请选择取餐地点</view>
        </view>
        <view class="time" @click="selectTime">
          <view class="t_icon"></view>
          <view class="t_text">预约取餐时间:</view>
          <view class="t_select">{{ time.join(' ') || '' }}</view>
          <view v-if="!time.length">请选择取餐时间</view>
        </view>
      </view>
      <!-- 餐品信息 -->
      <view class="order" v-for="(item, index) in groupedData" :key="item.sellerId">
        <view class="sller_content">
          <view class="s_name">{{ item.sellerName }}</view>
          <view class="s_icon"></view>
        </view>
        <view class="food_content" v-for="goods in item.goods" :key="goods.id">
          <view class="f_icon"><img :src="goods.icon" alt=""></view>
          <view class="f_right">
            <view class="f_top">
              <view class="f_name">{{ goods.name }}
                <view class="f_tip">{{ getWindowName(goods.window) }}</view>
              </view>
              <view class="f_price">￥{{ goods.price }}</view>
            </view>
            <view class="f_bottom">
              <view class="f_detail">{{ goods.dec }}</view>
              <view class="f_count">x{{ goods.count }}</view>
            </view>
            <view class="remark" v-if="orderStatu.status == '已完成'">
              <view class="text" @click="toRemark(goods)">去评价</view>
            </view>
          </view>
        </view>
        <view class="detail">
          <view class="d_code">
            <view class="code_left d_title">订单编号
              <view class="code_center">{{ item.orderId }}</view>
            </view>
            <view class="code_right">复制</view>
          </view>
          <view class="d_time">
            <view class="time_left d_title">下单时间
              <view class="time_right">{{ timestampToDateTime(item.startTime) }}</view>
            </view>

          </view>
          <view class="d_mark" @click="remarkHandler(item.orderId, index)">
            <view class="mark_left d_title">备注消息
              <!-- <view v-if="remarkText == ''" class="mark_right_place">可以添加备注哦~</view> -->
              <!-- <view v-else class="mark_right">{{ remarkText }}</view> -->
              <view v-if="!item.remark" class="mark_right_place">可以添加备注哦~</view>
              <view v-else class="mark_right">{{ item.remark }}</view>
            </view>
          </view>
        </view>
        <view class="money">
          <view class="m_text">餐品金额</view>
          <view class="m_num">￥{{ item.allPrice }}</view>
        </view>
      </view>
    </view>
    <!-- 地址选择 -->
    <up-picker :show="showAddress" ref="uPickerRef" :columns="columns" @confirm="confirm1" @cancel="cancel1"
      @change="changeHandler" closeOnClickOverlay @close="close1"></up-picker>
    <!-- 时间选择 -->
    <up-datetime-picker v-show="showTimer" @confirm="confirm2" @cancel="cancel2" @close="close2" hasInput
      :show="showTimer" mode="time" closeOnClickOverlay></up-datetime-picker>
  </view>

  <view class="pay">
    <view v-if="orderStatu.status == '待付款'" class="pay_cancel" @click="CancelOrder">取消订单</view>
    <view class="p_right" v-if="orderStatu.status == '超时'">
      <view class="open_again" @click="openAgainOrder">重新打开
      </view>
      <view class="pay_total">￥{{ totalMoney }}</view>
    </view>
    <view class="p_right" v-if="orderStatu.status !== '超时'">
      <view class="pay_wait" v-if="orderStatu.status == '待付款'" @click="laterPay">稍后付款</view>
      <view class="pay_now" v-if="orderStatu.status == '待付款'" @click="showPayPop(true)">立即付款
      </view>
      <view class="pay_now" v-if="orderStatu.status == '待出餐'" @click="sendFoodSeller">待出餐</view>
      <view class="pay_now" v-if="orderStatu.status == '待取餐' && isSeller" @click="sendFinallySeller">待送达</view>
      <view class="pay_now" v-if="orderStatu.status == '待取餐' && !isSeller" @click="receiveFoodSeller">待取餐</view>
      <view class="pay_now" v-if="orderStatu.status == '已完成'">已完成</view>
      <view class="pay_total">￥{{ totalMoney }}</view>
    </view>

  </view>
  <!-- 取消订单模态框 -->
  <up-modal @confirm="confirmCancelOrder" @cancel="notCancelOrder" :show="showCancelModel" :title="CancleTitle"
    :content='CalcleContent' showCancelButton buttonReverse></up-modal>
  <!-- 备注模态框 -->
  <up-modal @confirm="confirmRemark" @cancel="cancelRemark" :show="showRemarkModel" showCancelButton buttonReverse>
    <template #default>
      <input type="text" placeholder="请输入备注信息" v-model="remarkText">
    </template>
  </up-modal>
  <!-- 消息提示框 -->
  <view>
    <up-toast ref="uToastRef" style="pointer-events: none;"></up-toast>
  </view>
  <!-- 支付键盘 -->
  <u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
    :show="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
    <view>
      <view class="u-text-center u-padding-20 money">
        <text>{{ totalMoney }}</text>
        <text class="u-font-20 u-padding-left-10">元</text>
        <view class="u-padding-10 close" data-flag="false" @tap="showPayPop(false)">
          <u-icon name="close" color="#333333" size="28"></u-icon>
        </view>
      </view>
      <view class="u-flex u-row-center">
        <u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
          @finish="finish"></u-message-input>
      </view>
      <view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
    </view>
  </u-keyboard>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { searchCurrentOrder, cancelOrder, updateOrder, openAgain, payOrder, sendFood, receiveFood } from "@/api/order";
import useOrderStore from '@/store/modules/order'
import useUserStore from '@/store/modules/user'
let orderStore = useOrderStore()
let userStore = useUserStore()
const uToastRef = ref(null)

let orderStatu = ref({})
/**
 * 获取当前订单
 */
let groupedData = ref([])
let currentOrder = ref({})
let currentOrderId = ref('')
let totalMoney = ref(0)
let isSeller = ref(false) // 判断当前用户是否是该订单的商家

let getOrderInfo = () => {
  searchCurrentOrder({ orderId: orderStore.currentOrderId }).then(res => {
    groupedData.value = res.data.order
    currentOrder.value = res.data
    currentOrderId.value = res.data._id
    if (res.data.order[0].sellerId == userStore.userInfo._id) {
      isSeller.value = true
    }
    time.value = res.data.takeFoodTime
    address.value = res.data.address
    remarkText.value = res.data.remark
    orderStatu.value = orderStatus(currentOrder.value)
    if (orderStatu.value.status == '待付款') {
      getRemainTime(res.data)
      console.log(orderStatu.value.status);
    }
    if (groupedData.value.length >= 1) {
      totalMoney.value = 0
      groupedData.value.forEach(item => {
        totalMoney.value += Number(item.allPrice)
      });
      totalMoney.value = totalMoney.value.toFixed(2)
    }
  })
}
getOrderInfo()


/**
 * 判断餐品属于哪个窗口
 */
function getWindowName(windowNumber) {
  switch (windowNumber) {
    case '1':
      return '窗口一';
    case '2':
      return '窗口二';
    case '3':
      return '窗口三';
    case '4':
      return '窗口四';
    case '5':
      return '窗口五';
    default:
      return '未知窗口';
  }
}
/**
 * 自取地点选择
 */
const showAddress = ref(false);
let address = ref([])
const columns = reactive([
  ["到店取餐", '公共区域', '女生宿舍', "男生宿舍"],
  ['到店取餐']
]);
const columnData = reactive([
  ['到店取餐'],
  ['理工楼A栋门口', '理工楼B栋门口', '理工楼C栋门口'],
  ['1栋', '2栋', '3栋', '4栋'],
  ['1栋', '2栋', '3栋', '4栋'],
]);
const uPickerRef = ref(null)
const changeHandler = (e) => {
  const {
    columnIndex,
    value,
    values,
    index,
  } = e;

  if (columnIndex === 0) {
    uPickerRef.value.setColumnValues(1, columnData[index]);
  }
};

function selectAddress() {
  showAddress.value = true
}

const confirm1 = (e) => {
  console.log('confirm', e);
  address.value = e.value
  showAddress.value = false;
};
const cancel1 = () => {
  showAddress.value = false;
};
const close1 = () => {
  showAddress.value = false;
};
/**
 * 时间选择
 */
const showTimer = ref(false);
const time = ref([]);
function selectTime() {
  showTimer.value = true
}
// 获取当天 2025-02-25这样的格式
function getFormattedDate() {
  const date = new Date();
  const year = date.getFullYear();
  // 月份是从 0 开始计数的，所以要加 1
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
}
const confirm2 = (e) => {
  console.log('confirm2', e);
  showTimer.value = false;
  time.value = [getFormattedDate(), e.value]
  console.log(time.value);

};
const cancel2 = () => {
  showTimer.value = false;
};
const close2 = () => {
  showTimer.value = false;
};
/**
 * 将时间戳转换为 2019-06-28 09:14:30的格式
 */
function timestampToDateTime(timestamp) {
  const date = new Date(Number(timestamp));
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
/**
 * 判断当前订单的状态
 */
// 0-待付款, 1-待出餐, 2-待取餐, 3-已完成, 4-超时
let orderStatuNum = ref(0)
const orderStatus = (order) => {
  let time = order.startTime
  let isPay = order.isPay
  let isSend = order.isSend
  let isReceive = order.isReceive
  const currentTime = new Date();
  const orderTime = new Date(Number(time));
  const timeDiff = (currentTime - orderTime) / (1000 * 60); // 计算时间差，单位为分钟

  if (timeDiff > 10 && !isPay) {
    orderStatuNum.value = 4
    return { status: '超时', message: '您的订单已超时，请重新下单。' };
  }

  if (!isPay) {
    orderStatuNum.value = 0
    return { status: "待付款", message: "您的订单已经提交，请在10分钟内付款，超时订单将自动关闭。" };
  }

  if (!isSend) {
    orderStatuNum.value = 1
    return { status: "待出餐", message: "您的订单已付款，商家正在出餐中，请耐心等待。" }
  }

  if (!isReceive) {
    orderStatuNum.value = 2
    return { status: "待取餐", message: "您的订单已出餐，正在配送途中，请注意查收。" };
  }

  orderStatuNum.value = 3
  return { status: "已完成", message: "感谢您的支持，欢迎再次光临！" }
};

/**
 * 订单剩余支付时间计算
 */
let remainTime = ref(''); // 剩余时间
let timer = null; // 定时器

function getRemainTime(order) {
  // 清除之前的定时器
  clearTimer();

  // 获取下单时间戳
  const startTime = Number(order.startTime);
  const endTime = startTime + 10 * 60 * 1000; // 下单时间 + 10分钟

  // 更新剩余时间
  function updateRemainTime() {

    const now = Date.now(); // 当前时间
    const remainingTime = endTime - now; // 剩余时间（毫秒）

    if (remainingTime > 0) {
      const minutes = Math.floor((remainingTime % (60 * 60 * 1000)) / (60 * 1000));
      const seconds = String(Math.floor((remainingTime % (60 * 1000)) / 1000)).padStart(2, '0');
      remainTime.value = `${minutes}分${seconds}秒`;
    } else {
      remainTime.value = '0分00秒';
      clearTimer(); // 停止定时器
      getOrderInfo()
    }
  }

  // 启动定时器，每秒更新一次剩余时间
  timer = setInterval(updateRemainTime, 1000);
  updateRemainTime(); // 立即更新一次
}

// 清除定时器的方法
function clearTimer() {
  if (timer) {
    clearInterval(timer);
    timer = null; // 重置 timer 变量
  }
}

/**
 * 稍后付款按钮点击事件
 */

const laterPay = () => {
  let Allremark = groupedData.value.map(item => {
    return { orderId: item.orderId, remark: item.remark }
  })
  console.log('Allremark: ', Allremark);
  updateOrder({ orderId: currentOrderId.value, address: address.value, Allremark: Allremark, takeFoodTime: time.value })
    .then(res => {
      if (res.code == 200) {
        // 返回上一个页面
        uni.navigateBack({ delta: 1 });
      } else {
        uToastRef.value.show({
          type: 'warn',
          message: "网络开了点小差~",
          duration: '1000',
        });
      }
    })
}

/**
 * 取消订单处理逻辑
 */
let showCancelModel = ref(false);
let CancleTitle = ref('取消订单');
let CalcleContent = ref('确定要取消订单吗？取消后订单将无法恢复。');
const CancelOrder = () => {
  showCancelModel.value = true
}
const confirmCancelOrder = () => {
  showCancelModel.value = false
  cancelOrder({ orderId: currentOrderId.value }).then(res => {
    if (res.code == 200) {
      setTimeout(() => {
        uni.navigateBack({ delta: 1 });
      }, 1500);
      uToastRef.value.show({
        type: 'success',
        message: "订单取消成功~",
        duration: '1000',
      });
    } else {
      uToastRef.value.show({
        type: 'warn',
        message: "订单取消失败",
        duration: '1000',
      });
    }
  })
}
const notCancelOrder = () => {
  showCancelModel.value = false
}

/**
 * 备注处理逻辑
 */
let showRemarkModel = ref(false)
let remarkText = ref('')
// 当前正在填写备注的订单下标
let remarkIndex = ref(0)
const remarkHandler = (orderId, index) => {
  showRemarkModel.value = true
  // let index = groupedData.value.findIndex(item => item.orderId == orderId)
  remarkIndex.value = index
  remarkText.value = groupedData.value[remarkIndex.value].remark || ''
}
const confirmRemark = () => {
  showRemarkModel.value = false
  groupedData.value[remarkIndex.value].remark = remarkText.value
  remarkText.value = ''
}
const cancelRemark = () => {
  showRemarkModel.value = false
}
/**
 * 重新打开订单处理逻辑
 */
const openAgainOrder = () => {
  openAgain({ orderId: currentOrderId.value, startTime: Date.now() }).then(res => {
    console.log('openAgain: ', res);
    getOrderInfo()
  })

}

/**
 * 立即付款处理逻辑
 */
const show = ref(false)
const password = ref('')

const showPayPop = (flag = true) => {
  // 付款前先更新订单信息
  let Allremark = groupedData.value.map(item => {
    return { orderId: item.orderId, remark: item.remark }
  })
  console.log('Allremark: ', Allremark);
  updateOrder({ orderId: currentOrderId.value, address: address.value, Allremark: Allremark, takeFoodTime: time.value })
    .then(res => {
      if (res.code == 200) {
      } else {
        uToastRef.value.show({
          type: 'warn',
          message: "网络开了点小差~",
          duration: '1000',
        });
      }
    })
  if (address.value.length == 0) {
    uToastRef.value.show({
      type: 'warn',
      message: "请选择取餐地点",
      duration: '1000',
    });
    return
  }
  if (time.value.length == 0) {
    uToastRef.value.show({
      type: 'warn',
      message: "请选择取餐时间",
      duration: '1000',
    })
    return
  }
  password.value = ''
  show.value = flag
  // #ifdef H5 || WEB
  setTimeout(() => {
    const btn = document.querySelector('.u-keyboard__button-wrapper__button.u-keyboard__button-wrapper__button--gray')
    if (btn) {
      console.log(btn)
      btn.onclick = onBackspace
    }
  }, 500)
  // #endif
}
// 当输入了六位数后执行付款操作
const onChange = (val) => {
  if (password.value.length < 6) {
    password.value += val
  }

  if (password.value.length >= 6) {
    pay()
  }
}

const onBackspace = () => {
  if (password.value.length > 0) {
    password.value = password.value.substring(0, password.value.length - 1)
  }
}

const pay = () => {
  uni.showLoading({
    title: '支付中'
  })

  payOrder({ orderId: currentOrderId.value }).then(res => {
    uni.hideLoading()
    if (res.code == 200) {
      setTimeout(() => {
        uni.showToast({
          icon: 'success',
          title: '支付成功'
        })
        // 支付成功跳转到支付结果页面
        uni.redirectTo({
          url: '/pages/components/order/paySuccess'
        });
      }, 1000);
    } else {
      uni.showToast({
        icon: 'error',
        title: '支付失败'
      })
    }
  }).catch(err => {
    uni.hideLoading()
    uni.showToast({
      icon: 'error',
      title: '支付失败'
    })
  })
}
const finish = (val) => {
  console.log('finish: ', val);
  console.log(11111)
}

/**
 * 待出餐处理逻辑
 */
const sendFoodSeller = () => {
  sendFood({ orderId: currentOrderId.value }).then(res => {
    if (res.code == 200) {
      getOrderInfo()
      uni.showToast({
        icon: 'success',
        title: '出餐成功'
      })
    } else {
      uni.showToast({
        icon: 'error',
        title: '出餐失败'
      })
    }
  }).catch(err => {
    uni.showToast({
      icon: 'error',
      title: '出餐失败'
    })
  })
}

/**
 * 待送达
 */
const sendFinallySeller = () => {
  uni.showToast({
    icon: 'none',
    title: '等待餐品送达以及用户取餐~'
  })
}
/**
 * 待取餐
 */
const receiveFoodSeller = () => {
  // 确认取餐
  uni.showModal({
    title: '提示',
    content: '确认已收到餐品？确认后订单将完成，感谢您的惠顾！',
    success: (res) => {
      if (res.confirm) {
        receiveFood({ orderId: currentOrderId.value }).then(res => {
          if (res.code == 200) {
            getOrderInfo()
            uni.showToast({
              icon: 'success',
              title: '取餐成功'
            })
          }
        }).catch(err => {
          uni.showToast({
            icon: 'error',
            title: '取餐失败'
          })
        })
      }
    }
  })

}

/**
 * 评价
 */
function toRemark(item) {
  uni.navigateTo({
    url: `/pages/components/order/foodDetail?foodId=${item.id}&&sellerId=${item.sellerId}`
  })
  console.log('item: ', item);
}

</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh);
  /* #ifdef H5 */
  // height: calc(100vh - var(--window-top) - 100rpx);
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: $uni-bg-color-grey;
  overflow: auto;

  .wait_pay {
    width: 100%;
    padding: 30rpx;
    font-size: 28rpx;
    color: $uni-text-color;
    display: flex;
    flex-direction: column;

    .w_title {
      font-weight: 600;
    }

    .w_detail {
      display: flex;
      font-size: 20rpx;
      color: $uni-text-color-grey;
      margin-top: 8rpx;

      .w_time {
        color: $uni-text-color ;
        margin: 0 4rpx;
      }
    }
  }

  .addressAndTime {
    width: 100%;
    padding: 20rpx 30rpx;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin-top: 10rpx;
    font-size: 24rpx;

    .address,
    .time {
      width: 100%;
      display: flex;
      align-items: center;
      color: $uni-text-color-grey;

      .a_icon,
      .t_icon {
        width: 26rpx;
        height: 26rpx;
        background-image: url("@/assets/order/address.svg");
        background-size: cover;
      }

      .t_icon {
        width: 26rpx;
        height: 26rpx;
        background-image: url("@/assets/order/time.svg");
        background-size: cover;
      }

      .a_text,
      .t_text {
        margin: 0 8rpx;
      }

      .a_select,
      .t_select {
        color: $uni-text-color;
        font-weight: 600;
      }
    }

    .time {
      margin-top: 20rpx;
    }
  }

  .order {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;

    .sller_content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      background-color: white;
      padding: 20rpx 30rpx;

      .s_name {
        font-weight: 600;
      }

      .s_icon {
        width: 40rpx;
        height: 40rpx;
        background-image: url("@/assets/order/kefu.svg");
        background-size: cover;
      }
    }

    .food_content {
      width: 100%;
      padding: 20rpx 30rpx;
      background-color: white;
      display: flex;
      border-bottom: 4rpx solid $uni-bg-color-grey;

      .f_icon {
        width: 140rpx;
        height: 140rpx;

        img {
          width: 140rpx;
          height: 140rpx;
        }
      }

      .f_right {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 0 0 0 20rpx;

        .f_top {
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: space-between;

          .f_name {
            font-size: 28rpx;
            font-weight: 600;
            display: flex;

            .f_tip {
              font-size: 20rpx;
              border: 2rpx solid $uni-text-color-grey;
              border-radius: 40rpx;
              color: $uni-text-color-grey;
              padding: 4rpx 10rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 0 10rpx;
            }
          }

          .f_price {
            font-size: 24rpx;
            color: $uni-text-color;
            font-weight: 600;
          }
        }

        .f_bottom {
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: $uni-text-color-grey;
          margin-top: 20rpx;
        }

        .remark {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: end;
          color: $uni-text-color-grey;

          .text {
            font-size: 20rpx;
            border: 2rpx solid $uni-text-color-grey;
            border-radius: 40rpx;
            padding: 2rpx 8rpx;
          }

        }
      }
    }

    .detail {
      width: 100%;
      background-color: white;
      margin-top: 20rpx;
      display: flex;
      flex-direction: column;
      padding: 20rpx 30rpx;
      font-size: 24rpx;
      color: $uni-text-color-grey;
      height: 180rpx;
      justify-content: space-between;

      .d_title {
        color: $uni-text-color-grey;
      }

      .d_code,
      .d_time,
      .d_marg {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .code_center {
          color: $uni-text-color;
          margin-left: 30rpx;
        }

        .code_left {
          display: flex;
          align-items: center;
        }

        .code_right {
          display: flex;
          align-items: center;
          padding: 2rpx 8rpx;
          border: 2rpx solid $uni-text-color-grey;
          border-radius: 30rpx;
          font-size: 20rpx;
        }
      }

      .d_time {
        .time_left {
          display: flex;
          align-items: center;
        }

        .time_right {
          color: $uni-text-color;
          margin-left: 30rpx;
        }
      }

      .d_mark {
        .mark_left {
          display: flex;
          align-items: center;
        }

        .mark_right {
          color: $uni-text-color;
          margin-left: 30rpx;
        }

        .mark_right_place {
          margin-left: 30rpx;
          color: $uni-text-color-grey;
        }
      }
    }

    .money {
      width: 100%;
      display: flex;
      padding: 20rpx 30rpx;
      font-size: 24rpx;
      color: $uni-text-color;
      justify-content: space-between;
      background-color: white;
      margin: 20rpx 0 90rpx 0;

      .m_text {
        font-weight: 600;
      }

      .m_num {
        font-weight: 600;
      }
    }
  }

}

.pay {
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: white;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  box-shadow: 0 0 30rpx 20rpx rgba(180, 180, 180, 0.2);

  .pay_cancel,
  .pay_wait {
    border: 2rpx solid $uni-text-color-grey;
    border-radius: 8rpx;
    padding: 0rpx 10rpx;
  }

  .pay_cancel {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .p_right {
    flex: 1;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: end;

    .pay_wait {
      display: flex;
      justify-content: center;
      align-items: center;

    }

    .pay_now,
    .open_again {
      padding: 2rpx 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8rpx;
      color: white;
      background-color: $uni-text-color-grey;
      margin-left: 20rpx;
    }

    .pay_total {
      color: $uni-text-color-red;
      font-weight: 600;
      margin-left: 10rpx;
    }
  }
}

.money {
  font-size: 80rpx;
  color: $uni-text-color;
  position: relative;

  .close {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    line-height: 28rpx;
    font-size: 28rpx;
  }
}

.tips {
  color: $u-tips-color;
}
</style>